<template>
  <div class="">
    <van-checkbox-group v-model="result" ref="box" class="big">
      <div
        v-for="(item, index) in $store.state.shopcar"
        :key="item.id"
        class="box"
      >
        <van-checkbox :name="item" @click="change"></van-checkbox>
        <van-card
          :price="item.minPrice"
          :title="item.name"
          :thumb="item.pic"
          class="van"
        >
          <template #footer>
            <van-stepper v-model="item.num" @change="step" />
            <van-button size="mini" @click="remove(index, item.id)"
              >删除</van-button
            >
          </template>
        </van-card>
      </div>
    </van-checkbox-group>
    <van-submit-bar
      :price="sum * 100"
      button-text="提交订单"
      class="butm"
      to="/tijiao"
    >
      <van-checkbox v-model="checked" @click="changeall">全选</van-checkbox>
    </van-submit-bar>
  </div>
</template>

<script>
export default {
  data() {
    return {
      checked: false,
      result: [],
    };
  },
  mounted() {},
  methods: {
    remove(index, id) {
      this.$store.commit("remove", index);
      this.result.forEach((item, index) => {
        if (item.id == id) {
          this.result.splice(index, 1);
        }
      });
      this.change()
    },
    step() {
      this.$store.commit("step");
    },
    change() {
      if (
        this.result.length == this.$store.state.shopcar.length &&
        this.$store.state.shopcar.length != 0
      ) {
        this.checked = true;
      } else {
        this.checked = false;
      }
    },
    changeall() {
      if (this.checked == true) {
        this.$refs.box.toggleAll(true);
      } else {
        this.$refs.box.toggleAll(false);
      }
    },
  },
  computed: {
    sum() {
      let pic = 0;
      this.result.forEach((item) => {
        pic += item.num * item.minPrice;
      });
      return pic;
    },
  },
};
</script>

<style lang='scss'>
.butm {
  position: fixed;
  bottom: 60px;
}
.box {
  display: flex;
  width: 100%;
}
.big {
  width: 100%;
}
.van {
  width: 100%;
}
</style>